/**
 * Ant Design 响应式主题Provider
 *
 * 根据设备类型自动切换移动端/桌面端主题
 */

import React from 'react';
import { ConfigProvider } from 'antd';
import type { ConfigProviderProps } from 'antd/es/config-provider';
import zhCN from 'antd/locale/zh_CN';
import { useBreakpoint } from '../../hooks/useBreakpoint';
import { antdMobileTheme, antdDesktopTheme } from '../../config/antd-mobile-theme';

export interface AntdProviderProps {
  children: React.ReactNode;

  /**
   * 强制使用特定主题（可选）
   */
  theme?: 'mobile' | 'desktop' | 'auto';

  /**
   * 自定义配置（会与响应式主题合并）
   */
  config?: Partial<ConfigProviderProps>;
}

/**
 * AntdProvider 组件
 *
 * 提供响应式Ant Design主题配置
 *
 * @example
 * <AntdProvider>
 *   <App />
 * </AntdProvider>
 */
export const AntdProvider: React.FC<AntdProviderProps> = ({
  children,
  theme = 'auto',
  config = {}
}) => {
  const breakpoint = useBreakpoint();

  // 自动选择主题
  const getTheme = () => {
    if (theme === 'mobile') return antdMobileTheme;
    if (theme === 'desktop') return antdDesktopTheme;

    // auto模式：根据断点选择
    return breakpoint === 'mobile' ? antdMobileTheme : antdDesktopTheme;
  };

  const currentTheme = getTheme();

  return (
    <ConfigProvider
      theme={currentTheme}
      locale={zhCN}
      {...config}
    >
      {children}
    </ConfigProvider>
  );
};

AntdProvider.displayName = 'AntdProvider';
